<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom">
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <el-form-item label="版本号" prop="versionName">
        <el-input v-model="form.versionName" placeholder="请输入版本号"></el-input>
      </el-form-item>
      <el-form-item label="版本大小" prop="versionName">
        <el-input v-model="form.versionSize" placeholder="请输入版本大小"></el-input>
      </el-form-item>
      <el-form-item label="更新描述" prop="value">
        <el-input rows="5" type="textarea" v-model="form.versionUpdateContent" placeholder="请输入软件简述">
        </el-input>

      </el-form-item>
      <el-form-item label="更新状态" prop="status">
        <el-radio-group v-model="form.versionUpdateStatus" size="small">
          <el-radio-button label="false">关闭</el-radio-button>
          <el-radio-button label="true">显示</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-for="(item, index) in downloadNumberList" :key="index">
        <el-input v-model="item.downloadUrl" placeholder="Please input" class="input-with-select">
          <template #prepend>
            <el-select v-model="item.downloadUrlType" placeholder="请选择下载类型">
              <el-option v-for="item in menuOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </template>
          <template #suffix>
            <el-input v-model="item.downloadUrlCode" placeholder="请输入提取码(如果有)"></el-input>
          </template>
          <template #append>
            <el-button @click="downloadDelete(index)" :icon="Delete" type="danger"></el-button>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input v-model="download.downloadUrl" placeholder="Please input" class="input-with-select">
          <template #prepend>
            <el-select v-model="download.downloadUrlType" placeholder="请选择下载类型">
              <el-option v-for="item in menuOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </template>
          <template #suffix>
            <el-input v-model="download.downloadUrlCode" placeholder="请输入提取码(如果有)"></el-input>
          </template>
          <template #append>
            <el-button :icon="Delete" type="danger"></el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-button style="text-align: center;" type="primary" @click="addDownloadClick">添加下载地址</el-button>
    </el-form>
  </Layer>
</template>

<script lang="ts" setup>
import type {LayerType} from "@/components/layer/index.vue";
import Layer from "@/components/layer/index.vue";
import {inject, Ref, ref} from "vue";
import {add, update} from "@/api/article/softwareversion";
import {addDownload, getData, softwareTypeList} from "@/api/article/softwaredownload";
import {ElMessage} from "element-plus";
import {Delete} from "@element-plus/icons";

const props = defineProps({
  layer: {
    type: Object,
    default() {
      return {
        show: false,
        title: "",
        showButton: true,
      };
    },
  },
});
const ruleForm: Ref<ElFormItemContext | null> = ref(null);
const menuOptions = ref([
  {
    value: '0',
    label: '顶级菜单',
  }
])
let downloadNumberList: any = ref([])
const download = ref({
  downloadUrl: '',
  downloadUrlType: '',
  downloadUrlCode: ''
})
const layerDom: Ref<LayerType | null> = ref(null);
const versionActive: any = inject("versionActive");
const emits = defineEmits(["getTableData"]);
let form = ref({
  versionId: '',
  versionName: '',
  versionSize: '',
  versionUpdateContent: '',
  versionUpdateStatus: '',
});
const rules = {
  softwareTypeName: [{required: true, message: "请输入分类名称", trigger: "blur"}],
  "download.downloadUrl": [{required: true, message: "请输入分类名称", trigger: "blur"}],
  "download.downloadUrlCode": [{required: true, message: "请输入分类名称", trigger: "blur"}],
};
init();

function init() {
  // 用于判断新增还是编辑功能
  if (props.layer.row) {
    form.value = JSON.parse(JSON.stringify(props.layer.row)); // 数量量少的直接使用这个转
    //获取当前的字典
  } else {
  }
  softwareTypeList().then(({data}) => {
    menuOptions.value = data
  })
  getData(form.value.versionId).then(({data}) => {
    if (data.length > 0) {
      downloadNumberList.value = data
    }
  })
}

const submit = () => {
  ruleForm.value.validate((valid: boolean) => {
    if (valid) {
      let params = form.value;
      if (props.layer.row) {
        updateForm(params);
      } else {
        addForm(params);
      }
      // 判断 download 是否有值
      if (download && download.value.downloadUrl) {
        downloadNumberList.value.push(download.value)
      }
      addDownload(downloadNumberList.value, form.value.versionId)
    } else {
      return false;
    }
  });
};
const addDownloadClick = () => {
  downloadNumberList.value.push(download.value)
  download.value = {
    downloadUrl: '',
    downloadUrlType: '',
    downloadUrlCode: ''
  }
}
const downloadDelete = (index: number) => {
  downloadNumberList.value.splice(index, 1)
}

// 新增提交事件
const addForm = (params: any) => {
  params.parentSoftwareTypeId = params.parentId;
  add(params).then((res) => {
    ElMessage({
      type: "success",
      message: "新增成功",
    });
    props.layer.show = false;
    emits("getTableData", true);
  });
};

// 编辑提交事件
const updateForm = (params: any) => {
  params.parentSoftwareTypeId = params.parentId;
  update(params).then((res) => {
    ElMessage({
      type: "success",
      message: "编辑成功",
    });
    emits("getTableData", false);
  });
};
</script>

<style lang="scss" scoped></style>